<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- SVG内容直接定义在html页面中 -->
    <!-- 直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。 -->
    <!-- SVG绘制图形使用‘/’单标签表示结束符 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="1000">
            <!-- 矩形元素 -->
            <rect x="30" y="30" width="300" height="100" rx="20" ry="30" style="fill:olive;stroke-width:5;stroke:red;fill-opacity: 0.5;stroke-opacity:1;"/>
            <!-- x和y - 绘制矩形的左上角坐标值
            width和height - 设置绘制矩形的宽度和高度
            rx和xy - 设置矩形的圆角
            矩形的轮廓线为5px的红色轮廓，填充色为牛油果绿-->
    
            <!-- 椭圆元素 -->
            <ellipse cx="400" cy="220" rx="100" ry="200"  style="fill:pink;stroke-width:2;stroke:black;fill-opacity:0.7;stroke-opacity:0.9"/>
            <!-- cx和cy - 绘制椭圆的圆心坐标值
            rx和ry- 绘制椭圆的水平半径/垂直半径  【注意：当rx和ry的值相同时,绘制的是圆形】
            fill-opacity 填充色透明度    stroke-opacity 轮廓线透明度 -->

            <!-- 圆形元素 -->
            <circle cx="100" cy="350" r="40" stroke="black" stroke-width="2" fill="red" />
            <!--  cx cy表示圆心的x,y坐标。  r表示圆的半径。 -->

            <!-- 直线元素 -->
            <line x1="0" y1="0" x2="100" y2="300"  style="stroke-width:2;stroke:red;"/>
            <!-- <line x1="起点坐标" y1="" x2="终点坐标" y2="" /> -->
            <!-- 注意：绘制直线时,默认描边颜色为白色 -->
    
            <!-- 多边形元素:比如五角形 -->
            <polygon points="100,150 40,280 190,200 10,200 160,280" style="fill:orange;stroke:orangered;stroke-width:2;fill-rule:evenodd;"/>
            <!-- points--多边形中所有的点坐标 -->
    
            <!-- 曲线元素：折线 -->
            <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke-width:2;stroke:blue;" />

            <!-- 特效元素如下 ：注意：线性渐变或射线渐变,设置基准线(圆)的坐标值必须是百分值，允许为负值，允许为大于 100% 的值
            设置渐变颜色位置必须是百分值只能是从 0% ~ 100%----------------------------------------------------------->
           
            <!-- 线性渐变------基准线 -->
            <!-- <defs>
                <linearGradient id="grad" x1="基准线的起点坐标" y1="" x2="基准线的终点坐标" y2="" >
                    <stop offset="0%~100%" stop-color="颜色" />
                </linearGradient>
            </defs>
            <rect fill="url(#渐变元素的id)" /> -->
            <!-- 线性元素         实例--------------------------------------------- -->
            <defs>
                <!-- 水平渐变 【垂直渐变：<linearGradient id="grad000" x1="0%" y1="0%" x2="0%" y2="100%" >】 -->
                <linearGradient id="grad000" x1="0%" y1="0%" x2="100%" y2="0%" >
                    <stop offset="0%" stop-color="red" stop-opacity="0.7" />
                    <stop offset="100%" style="stop-color:yellow;stop-opacity:1;" />
                </linearGradient>
            </defs>
            <ellipse cx="800" cy="70" rx="85" ry="55" fill="url(#grad000)" /><!-- 椭圆水平渐变 -->
            <line x1="800" y1="100" x2="1000" y2="200"  style="stroke-width:5;" stroke="url(#grad000)"/><!-- 直线水平渐变 -->
    
            <!-- 放射性渐变---------水平渐变-------基准圆 -->
            <!-- <defs>
                <radialGradient id="grad" fx="起点基准圆的圆心x" fy="" cx="终点基准圆的圆心" cy="" r="终点基准圆的半径" >
                    <stop offset="0%~100%" stop-color="颜色" />
                </radialGradient>
            </defs>
            <rect fill="url(#渐变元素的id)" /> -->
            <!-- 放射性渐变--------------实例---------中心渐变---------------------------------- -->
            <defs>
                <radialGradient id="grad111" fx="50%" fy="50%" cx="50%" cy="50%" r="50%" >
                    <stop offset="0%" style="stop-color:teal;stop-opacity:0;" />
                    <stop offset="100%" style="stop-color:rgb(163, 37, 163);stop-opacity:1;" />
                </radialGradient>
            </defs>
            <rect x="500" y="300" width="300" height="100" fill="url(#grad111)" />


            <!-- svg路径===================【是一个【闭环】 z关闭后，会回到起点。默认填充黑色】================================================== -->
            <!-- M = moveto  开始移动
                 L = lineto  移动到
                 H = horizontal lineto
                 V = vertical lineto
                 C = curveto
                 S = smooth curveto
                 Q = quadratic Bézier curve
                 T = smooth quadratic Bézier curveto
                 A = elliptical Arc  椭圆弧 参数【 起始点坐标、半径、方向、结束点坐标 】
                 Z = closepath 关闭路径-->
                 <!-- ！！！注意：以上所有命令均允许小写字母。【大写表示绝对定位，小写表示相对于上一个点的定位】 -->
                 <path d="M550 0 L475 200 L625 200 Z" fill="none" stroke="red" stroke-width="5"/>
                <!-- 起始点150 0，移动到75 200，再到225 200,结束 -->

                <!-- 下面的例子创建了一个二次方贝塞尔曲线，A 和 C 分别是起点和终点，B 是控制点：================================ -->
                <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
                stroke-width="3" fill="none" />
                <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
                stroke-width="3" fill="none" />
                <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
                fill="none" />
                <path d="M 100 350 q 150 -300 300 0" stroke="blue"
                stroke-width="5" fill="none" />
                <!-- Mark relevant points -->
                <g stroke="black" stroke-width="3" fill="black">
                  <circle id="pointA" cx="100" cy="350" r="3" />
                  <circle id="pointB" cx="250" cy="50" r="3" />
                  <circle id="pointC" cx="400" cy="350" r="3" />
                </g>
                <!-- Label the points -->
                <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
                  <text x="100" y="350" dx="-30">A</text>
                  <text x="250" y="50" dy="-10">B</text>
                  <text x="400" y="350" dx="30">C</text>
                </g>
                <!-- ================================================================================================= -->
                <!-- 线框样式================================stroke stroke-width stroke-linecap端点样式[butt平直 round圆形 square正方形 inherit继承]  stroke-dasharray虚线[可以接收一串数字，第一个数字表示实线的长度，第二个数字表示间隔的长度] -->
                <g fill="none">
                    <path stroke="green" d="M5 320 L215 320" stroke-width="15" stroke-linecap="round" stroke-dasharray="5,28" />
                </g>


    
            <!-- svg文本=============================-旋转黑色文字============================================================= -->
            <text x="30" y="50" fill="black" transform="rotate(30 20,40)">I love SVG</text><!-- "rotate(30 20,40)"  旋转角度 旋转的中心点 -->
            <!-- 根据路径设置路径文字，实现文字路径任意扭曲变形----------------------------- -->
            <defs>
               <path id="path1" d="M75,20 a1,1 0 0,0 100,0" /><!-- 起始点75,20  弧形 终点100,0  -->
             </defs>
             <text x="0" y="100" style="fill:blue;">
               <textPath xlink:href="#path1">哈哈哈哈哈哈哈哈哈哈哈</textPath>
             </text>
             <!-- 文本内容分小组--------------------------------------------------- -->
             <text x="500" y="20" style="fill:red;">列表文本:
               <tspan x="500" y="45">First line</tspan>
               <tspan x="500" y="70">Second line</tspan>
             </text>
             <!-- 链接文本--------------------------------------------------------->
             <a xlink:href="https://www.baidu.com" target="_blank">
                <text x="800" y="215" fill="black">链接文本</text>
             </a>
             


            <!-- 滤镜模糊--高斯模糊==============【注意： Internet Explorer和Safari不支持SVG滤镜！】===================================================--->
            <!-- <filter></filter>滤镜元素 -->
            <!-- <feGaussianBlur></feGaussianBlur>该标签用于创建模糊效果 -->
            <!-- 滤镜模糊效果实例----------------所有svg滤镜都写在defs里面--------------------------------------------------- -->
            <defs>
                <!-- filter定义一个滤镜的唯一名称 x和y表示什么？？？？？？？？？？-->
               <filter id="f1" x="0" y="0">
                    <!-- feGaussianBlur定义模糊效果 in="SourceGraphic"表示由整个图像创建效果  stdDeviation定义模糊量   -->
                    <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
               </filter>
            </defs>
            <rect width="90" height="90" x="500" y="500" stroke="green" stroke-width="25" fill="yellow" filter="url(#f1)" />
            <!-- filter="url(#f1)"用来将rect矩形元素链接到#f1滤镜 -->




            <!-- 阴影效果============实例1================================================== -->
            <defs>
                <filter id="ff" x="0" y="0" width="200%" height="200%" >
                    <!-- feOffset元素创建阴影效果 将svg图像在xy屏幕平移 dx dy表示水平/垂直平移量-->
                    <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                    <!-- feBlend混合偏移图像顶部 -->
                    <feBlend in="SourceGraphic" in2="offout" mode="normal" />
                </filter>
            </defs>
            <rect width="90" x="800" y="450" height="90" stroke="purple" stroke-width="5" fill="yellow" filter="url(#ff)" />
            <!-- 阴影效果----------------实例2---------------阴影变模糊----------------------------------------- -->
            <defs>
                <filter id="gg" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                    <!-- <feGaussianBlur>元素的stdDeviation属性定义模糊量 -->
                    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
                    <!-- 混合 -->
                    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                </filter>
            </defs>
            <rect width="90" x="800" y="650" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#gg)" />
            <!-- 阴影效果---------------实例3-------------制作黑色阴影---------------------------------- -->
            <defs>
                <filter id="kk" x="0" y="0" width="200%" height="200%">
                    <!-- in="SourceAlpha"表示在Alpha通道使用残影，而不是整个rgba像素 -->
                    <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
                    <!-- 定义模糊量 -->
                    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
                    <!-- 混合 -->
                    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                </filter>
            </defs>
            <rect width="90" x="800" y="800" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#kk)" />
            <!-- 阴影效果-------------实例4-------------给阴影设置颜色-------------------------------------------- -->
            <defs>
                <filter id="xx" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
                    <!-- <feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。 '0.2'矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0） -->
                    <feColorMatrix 
                        result="matrixOut" in="offOut" type="matrix" 
                        values="0.2  0    0    0  0 
                                0    0.2  0    0  0
                                0    0    0.2  0  0
                                0    0    0    1  0" />
                    <!-- 定义模糊量 -->
                    <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
                    <!-- 混合 -->
                    <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                </filter>
            </defs>
            <rect width="90" x="850" y="300" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#xx)" />
    

        </svg>
</body>
</html>